<template>
  <div class="page">
    <navigation>{{ $t('资产') }}</navigation>
    <div class="page-space"></div>
    <div class="coin-info">
      <img
        :src="info.icon"
        alt=""
        class="logo"
      >
      <div class="coin-item">
        <div class="lab">{{ $t('总计金额') }}</div>
        <div class="val">{{ info.total_amount | numberFormat(8) }} {{ info.unit }}</div>
      </div>
    </div>
    <div class="coin-desc">
      <div class="coin-tit">{{ $t('金额信息') }}</div>
      <div class="coin-total">
        <div class="lab">{{ $t('总可用金额') }}</div>
        <div class="val">{{ info.available | numberFormat(8) }} {{ info.unit }}</div>
      </div>
      <ul class="balance-list">
        <li class="balance-item">
          <div class="balance-inner">
            <div class="balance-label">{{ $t('银行可用金额') }}</div>
            <div class="balance-amount">{{ info.bank_balance | numberFormat(8) }} {{ info.unit }}</div>
          </div>
        </li>
        <li class="balance-item">
          <div class="balance-inner">
            <div class="balance-label">{{ $t('交易所可用金额') }}</div>
            <div class="balance-amount">{{ `${info.exchange_available} ${info.unit}` }}</div>
          </div>
        </li>
        <li class="balance-item">
          <div class="balance-inner">
            <div class="balance-label">{{ $t('场外交易冻结金额') }}</div>
            <div class="balance-amount">{{ `${info.oct_freeze} ${info.unit}` }}</div>
          </div>
        </li>
        <li class="balance-item">
          <div class="balance-inner">
            <div class="balance-label">{{ $t('交易所冻结金额') }}</div>
            <div class="balance-amount">{{ `${info.exchange_freeze} ${info.unit}` }}</div>
          </div>
        </li>
        <li class="balance-item">
          <div class="balance-inner">
            <div class="balance-label">{{ $t('充值中金额') }}</div>
            <div class="balance-amount">{{ `${info.top_up_freeze} ${info.unit}` }}</div>
          </div>
        </li>
        <li class="balance-item">
          <div class="balance-inner">
            <div class="balance-label">{{ $t('提现中金额') }}</div>
            <div class="balance-amount">{{ `${info.withdraw_freeze} ${info.unit}` }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="ftbar">
      <nuxt-link
        class="button"
        :to="`/fund/withdraw?coin=${info.name}`"
      >
        <span class="recharge">{{ $t('提现') }}</span>
      </nuxt-link>
      <nuxt-link
        class="button"
        :to="`/fund/recharge?coin=${info.name}`"
      >
        <span class="withdraw">{{ $t('充值') }}</span>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import navigation from '@/components/Navigation'
export default {
  components: { navigation },
  data () {
    return {
      coinName: this.$route.query.coin
    }
  },
  computed: {
    ...mapState({
      ownedCoins: ({ fund }) => fund.ownedCoins
    }),
    info () {
      return this.ownedCoins[this.coinName] || {}
    }
  }
}
</script>
<style scoped>
.coin-info {
  text-align: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.coin-info .logo {
  display: block;
  margin: 0 auto 20px;
  width: 50px;
  height: 50px;
}
.coin-item {
  text-align: center;
}
.coin-item .lab {
  color: #666666;
}
.coin-item .val {
  font-weight: bold;
  font-size: 16px;
}
.coin-desc {
  padding: 15px;
}
.coin-tit {
  color: #444;
  line-height: 1;
  font-size: 14px;
}
.coin-total {
  margin: 0 auto;
  width: 86%;
  text-align: center;
  padding: 18px 0;
}
.coin-total .lab {
  color: #666666;
  margin-bottom: 5px;
}
.coin-total .val {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.ftbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ftbar .button {
  flex: 1 0 0;
  text-align: center;
  line-height: 40px;
  height: 40px;
  color: #fff;
  font-size: 14px;
}
.ftbar .recharge {
  display: block;
  background: #eee;
  font-size: 14px;
  letter-spacing: 2px;
}
.ftbar .withdraw {
  display: block;
  background: #1b8afe;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 2px;
}

.balance-list {
  margin: 10px 0;
}
.balance-list li {
  list-style-type: none;
}
.balance-item {
  display: inline-block;
  width: 49.4%;
  margin-bottom: 6px;
}
.balance-inner {
  margin: 0 1px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.balance-label {
  color: #666666;
  margin-bottom: 5px;
}
.balance-amount {
  font-weight: bold;
  font-size: 16px;
}
</style>
